<template>
	<div>
		<div id='question' v-show="show">
			<top-nav bgColor="#FFFFFF" title="专业测评" btnName="主页" :rightShow="false" returnPath="上一级"></top-nav>
			<section style="height: 3rem;"></section>
			<div v-for="item in question">
				<p class="question">{{item.sentence}}</p>
				<div class="answerBox">
					<div style="margin-bottom: 10px;"><input v-bind:id="item.answerA" type="radio" v-bind:name="item.id" class="answer" v-bind:value="item.yes" /><label v-bind:for="item.answerA">{{item.answerA}}</label></div>
					<div><input v-bind:id="item.answerB" type="radio" v-bind:name="item.id" class="answer" v-bind:value="item.no" /><label v-bind:for="item.answerB">{{item.answerB}}</label></div>
				</div>
			</div>
			<mu-button color="primary" @click="set" style="margin-right: 15px;">生成</mu-button>
		</div>
		<div id='img'>
			<top-nav bgColor="#FFFFFF" title="专业测评" btnName="主页" :rightShow="false"></top-nav>
			<section style="height: 3rem;"></section>
			<div id="echartContainer" style="width: 100%;height: 250px;margin-top:5%;"></div>
			<div style="margin-top: 5%;">
				<h2 style="display: inline;">ISFP</h2>
				<h3 style="display: inline;">{{titleName}}</h3>
				<p v-for="item in titleExplain" style="text-align: start;text-indent: -1rem;margin-left: 2rem;margin-right: 3%;">
					{{item}}
				</p>
			</div>
			<mu-button color="primary" @click="hideImg" style="margin-right: 15px;">返回</mu-button>
		</div>
	</div>
</template>

<script>
	var echarts = require('echarts')
	var myChart
	var option = {
		title: {
			text: ''
		},
		tooltip: {},
		//		legend: {
		//			data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
		//		},
		radar: {
			// shape: 'circle',
			name: {
				textStyle: {
					color: '#fff',
					backgroundColor: '#999',
					borderRadius: 3,
					padding: [3, 5]
				}
			},
			indicator: [{
					name: 'E外向',
					max: 21
				},
				{
					name: 'I内向',
					max: 21
				},
				{
					name: 'S实感',
					max: 26
				},
				{
					name: 'N直觉',
					max: 26
				},
				{
					name: 'T思考',
					max: 24
				},
				{
					name: 'F情感',
					max: 24
				}, {
					name: 'J判断',
					max: 22
				}, {
					name: 'P认知',
					max: 22
				}
			]
		},
		series: [{
			name: 'ACR类型',
			type: 'radar',
			// areaStyle: {normal: {}},
			data: [{
				value: [5, 5, 5, 5, 5, 5, 5, 5],
				name: '预算分配（Allocated Budget）'
			}]
		}]
	};

	export default {
		data() {
			return {
				titleType: "",
				titleName: "",
				titleExplain: [],
				show: true,
				value: [0, 0, 0, 0, 0, 0, 0, 0],
				question: [{
						id: 1,
						sentence: "1、 你要外出一整天，你会......",
						answerA: "计划要做什么和在什么时候做",
						answerB: "说去就去",
						yes: [0, 0, 0, 0, 0, 0, 1, 0],
						no: [0, 0, 0, 0, 0, 0, 0, 1],
					},
					{
						id: 2,
						sentence: "2、 你认为自己是一个......",
						answerA: "较为随兴所至的人",
						answerB: "较为有条理的人",
						yes: [0, 0, 0, 0, 0, 0, 0, 1],
						no: [0, 0, 0, 0, 0, 0, 1, 0],
					},
					{
						id: 3,
						sentence: "3、 假如你是一位老师，你会选教......",
						answerA: "以事实为主的教程",
						answerB: "设计理论的课程",
						yes: [0, 0, 1, 0, 0, 0, 0, 0],
						no: [0, 0, 0, 1, 0, 0, 0, 0],
					},
					{
						id: 4,
						sentence: "4、 你通常......",
						answerA: "与人容易混熟",
						answerB: "比较沉静或矜持",
						yes: [1, 0, 0, 0, 0, 0, 0, 0],
						no: [0, 1, 0, 0, 0, 0, 0, 0],
					},
					{
						id: 5,
						sentence: "5、 一般来说你和哪些人比较合得来",
						answerA: "富于想象力的人",
						answerB: "现实的人",
						yes: [0, 0, 0, 1, 0, 0, 0, 0],
						no: [0, 0, 1, 0, 0, 0, 0, 0],
					},
					{
						id: 6,
						sentence: "6、 你是否经常让......",
						answerA: "你的情感支配你的理智",
						answerB: "你的理智主宰你的情感",
						yes: [0, 0, 0, 0, 0, 1, 0, 0],
						no: [0, 0, 0, 0, 1, 0, 0, 0],
					},
					{
						id: 7,
						sentence: "7、 处理许多事情上，你会喜欢...... ",
						answerA: "凭兴所至行事",
						answerB: "按照计划行事",
						yes: [0, 0, 0, 0, 0, 0, 0, 1],
						no: [0, 0, 0, 0, 0, 0, 1, 0],
					},
					{
						id: 8,
						sentence: "8、 你是否",
						answerA: "容易让人了解",
						answerB: "难于让人了解",
						yes: [1, 0, 0, 0, 0, 0, 0, 0],
						no: [0, 1, 0, 0, 0, 0, 0, 0],
					},
					{
						id: 9,
						sentence: "9、 按照程序表做事",
						answerA: "和你心意",
						answerB: "令你感到束缚",
						yes: [0, 0, 0, 0, 0, 0, 1, 0],
						no: [0, 0, 0, 0, 0, 0, 0, 1],
					},
					{
						id: 10,
						sentence: "10、当你有一份特别的任务,你会喜欢......",
						answerA: "开始前小心组织策划",
						answerB: "边做边找需做什么",
						yes: [0, 0, 0, 0, 0, 0, 1, 0],
						no: [0, 0, 0, 0, 0, 0, 0, 1],
					},
					{
						id: 11,
						sentence: "11、在大多数情况下，你会选择......。",
						answerA: "顺其自然",
						answerB: "按程序表做事",
						yes: [0, 0, 0, 0, 0, 0, 0, 1],
						no: [0, 0, 0, 0, 0, 0, 1, 0],
					},
					{
						id: 12,
						sentence: "12、大多数人会说你是一个......",
						answerA: "重视自我隐私的人",
						answerB: "非常坦率开放的人",
						yes: [0, 1, 0, 0, 0, 0, 0, 0],
						no: [1, 0, 0, 0, 0, 0, 0, 0],
					},
					{
						id: 13,
						sentence: "13、你宁愿被人认为是一个......",
						answerA: "实事求是的人",
						answerB: "机灵的人",
						yes: [0, 0, 1, 0, 0, 0, 0, 0],
						no: [0, 0, 0, 1, 0, 0, 0, 0],
					},
					{
						id: 14,
						sentence: "14、在一大群人当中，通常是......",
						answerA: "你介绍大家认识",
						answerB: "别人介绍你",
						yes: [1, 0, 0, 0, 0, 0, 0, 0],
						no: [0, 1, 0, 0, 0, 0, 0, 0],
					},
					{
						id: 15,
						sentence: "15、你会跟那些人做朋友",
						answerA: "常提出新主意的",
						answerB: "脚踏实地的",
						yes: [0, 0, 0, 1, 0, 0, 0, 0],
						no: [0, 0, 1, 0, 0, 0, 0, 0],
					},
					{
						id: 16,
						sentence: "16、你倾向......",
						answerA: "重视感情多于逻辑",
						answerB: "重视逻辑多于感情",
						yes: [0, 0, 0, 0, 0, 1, 0, 0],
						no: [0, 0, 0, 0, 1, 0, 0, 0],
					},

					{
						id: 17,
						sentence: "17、你比较喜欢......",
						answerA: "坐观事情发展才做计划",
						answerB: "很早就做计划",
						yes: [0, 0, 0, 0, 0, 0, 0, 1],
						no: [0, 0, 0, 0, 0, 0, 1, 0],
					},
					{
						id: 18,
						sentence: "18、你喜欢花很多的时间......",
						answerA: "一个人独处",
						answerB: "和别人在一起",
						yes: [0, 1, 0, 0, 0, 0, 0, 0],
						no: [1, 0, 0, 0, 0, 0, 0, 0],
					},
					{
						id: 19,
						sentence: "19、与很多人一起你会......",
						answerA: "令你活力倍增",
						answerB: "常常令你心力憔悴",
						yes: [1, 0, 0, 0, 0, 0, 0, 0],
						no: [0, 1, 0, 0, 0, 0, 0, 0],
					},
					{
						id: 20,
						sentence: "20、你比较喜欢......",
						answerA: "很早便把约会、社交聚集等事情安排妥当",
						answerB: "无拘无束，看见当时有人么好玩就做什么",
						yes: [0, 0, 0, 0, 0, 0, 1, 0],
						no: [0, 0, 0, 0, 0, 0, 0, 1],
					},
					{
						id: 21,
						sentence: "21、计划一个旅程时，你较喜欢......",
						answerA: "大部分的时间都是跟当天的感觉行事",
						answerB: "事先知道大部分的日子会做什么",
						yes: [0, 0, 0, 0, 0, 0, 0, 1],
						no: [0, 0, 0, 0, 0, 0, 1, 0],
					},
					{
						id: 22,
						sentence: "22、在社交聚会中，你......",
						answerA: "有时感到郁闷",
						answerB: "常常乐在其中",
						yes: [0, 1, 0, 0, 0, 0, 0, 0],
						no: [1, 0, 0, 0, 0, 0, 0, 0],
					},
					{
						id: 23,
						sentence: "23、你通常......",
						answerA: "和别人容易混熟",
						answerB: "趋向自处一隅",
						yes: [1, 0, 0, 0, 0, 0, 0, 0],
						no: [0, 1, 0, 0, 0, 0, 0, 0],
					}, {
						id: 24,
						sentence: "24、哪些人会更吸引你",
						answerA: "一个思想敏捷及非常聪颖的人",
						answerB: "实事求是，具丰富常识的人",
						yes: [0, 0, 0, 1, 0, 0, 0, 0],
						no: [0, 0, 1, 0, 0, 0, 0, 0],
					}, {
						id: 25,
						sentence: "25、在日常工作中，你会......",
						answerA: "颇为喜欢处理迫使你争分夺秒的突发事件",
						answerB: "通常预先计划，以免要在压力下工作",
						yes: [0, 0, 0, 0, 0, 0, 0, 1],
						no: [0, 0, 0, 0, 0, 0, 1, 0],
					}, {
						id: 26,
						sentence: "26、你认为别人一般......",
						answerA: "要花很长时间认识你",
						answerB: "用很短时间认识你",
						yes: [0, 1, 0, 0, 0, 0, 0, 0],
						no: [1, 0, 0, 0, 0, 0, 0, 0],
					}, {
						id: 27,
						sentence: "27、下面这两个词，哪个词语更符合你的心意？请仔细思考词语含义，无视字形和读音",
						answerA: "注重隐私",
						answerB: "坦率开放",
						yes: [0, 1, 0, 0, 0, 0, 0, 0],
						no: [1, 0, 0, 0, 0, 0, 0, 0],
					}, {
						id: 28,
						sentence: "28、下面这两个词，哪个词语更符合你的心意？请仔细思考词语含义，无视字形和读音",
						answerA: "预先安排的",
						answerB: "无计划的",
						yes: [0, 0, 0, 0, 0, 0, 1, 0],
						no: [0, 0, 0, 0, 0, 0, 0, 1],
					}, {
						id: 29,
						sentence: "29、下面这两个词，哪个词语更符合你的心意？请仔细思考词语含义，无视字形和读音",
						answerA: "抽象",
						answerB: "具体",
						yes: [0, 0, 0, 1, 0, 0, 0, 0],
						no: [0, 0, 1, 0, 0, 0, 0, 0],
					}, {
						id: 30,
						sentence: "30、下面这两个词，哪个词语更符合你的心意？请仔细思考词语含义，无视字形和读音",
						answerA: "温柔",
						answerB: "坚定",
						yes: [0, 0, 0, 0, 0, 1, 0, 0],
						no: [0, 0, 0, 0, 1, 0, 0, 0],
					}, {
						id: 31,
						sentence: "31、下面这两个词，哪个词语更符合你的心意？请仔细思考词语含义，无视字形和读音",
						answerA: "思考",
						answerB: "感受",
						yes: [0, 0, 0, 0, 1, 0, 0, 0],
						no: [0, 0, 0, 0, 0, 1, 0, 0],
					}, {
						id: 32,
						sentence: "32、下面这两个词，哪个词语更符合你的心意？请仔细思考词语含义，无视字形和读音",
						answerA: "事实",
						answerB: "意念 ",
						yes: [0, 0, 1, 0, 0, 0, 0, 0],
						no: [0, 0, 0, 1, 0, 0, 0, 0],
					}, {
						id: 33,
						sentence: "33、下面这两个词，哪个词语更符合你的心意？请仔细思考词语含义，无视字形和读音",
						answerA: "冲动",
						answerB: "决定",
						yes: [0, 0, 0, 0, 0, 0, 0, 1],
						no: [0, 0, 0, 0, 0, 0, 1, 0],
					}, {
						id: 34,
						sentence: "34、下面这两个词，哪个词语更符合你的心意？请仔细思考词语含义，无视字形和读音",
						answerA: "热衷",
						answerB: "文静 ",
						yes: [1, 0, 0, 0, 0, 0, 0, 0],
						no: [0, 1, 0, 0, 0, 0, 0, 0],
					}, {
						id: 35,
						sentence: "35、下面这两个词，哪个词语更符合你的心意？请仔细思考词语含义，无视字形和读音",
						answerA: "文静",
						answerB: "外向",
						yes: [0, 1, 0, 0, 0, 0, 0, 0],
						no: [1, 0, 0, 0, 0, 0, 0, 0],
					}, {
						id: 36,
						sentence: "36、下面这两个词，哪个词语更符合你的心意？请仔细思考词语含义，无视字形和读音",
						answerA: "有系统的",
						answerB: "随意",
						yes: [0, 0, 0, 0, 0, 0, 1, 0],
						no: [0, 0, 0, 0, 0, 0, 0, 1],
					}, {
						id: 37,
						sentence: "37、下面这两个词，哪个词语更符合你的心意？请仔细思考词语含义，无视字形和读音",
						answerA: "理论",
						answerB: "肯定",
						yes: [0, 0, 0, 1, 0, 0, 0, 0],
						no: [0, 0, 1, 0, 0, 0, 0, 0],
					},
					{
						id: 38,
						sentence: "38、下面这两个词，哪个词语更符合你的心意？请仔细思考词语含义，无视字形和读音",
						answerA: "敏感",
						answerB: "公正",
						yes: [0, 0, 0, 0, 0, 1, 0, 0],
						no: [0, 0, 0, 0, 1, 0, 0, 0],
					},
					{
						id: 39,
						sentence: "39、下面这两个词，哪个词语更符合你的心意？请仔细思考词语含义，无视字形和读音",
						answerA: "令人信服",
						answerB: "感人的",
						yes: [0, 0, 0, 0, 1, 0, 0, 0],
						no: [0, 0, 0, 0, 0, 1, 0, 0],
					},
					{
						id: 40,
						sentence: "40、下面这两个词，哪个词语更符合你的心意？请仔细思考词语含义，无视字形和读音",
						answerA: "声明",
						answerB: "概念",
						yes: [0, 0, 1, 0, 0, 0, 0, 0],
						no: [0, 0, 0, 1, 0, 0, 0, 0],
					},
					{
						id: 41,
						sentence: "41、下面这两个词，哪个词语更符合你的心意？请仔细思考词语含义，无视字形和读音",
						answerA: "不受约束",
						answerB: "预先安排",
						yes: [0, 0, 0, 0, 0, 0, 0, 1],
						no: [0, 0, 0, 0, 0, 0, 1, 0],
					},
					{
						id: 42,
						sentence: "42、下面这两个词，哪个词语更符合你的心意？请仔细思考词语含义，无视字形和读音",
						answerA: "矜持",
						answerB: "健谈",
						yes: [0, 1, 0, 0, 0, 0, 0, 0],
						no: [1, 0, 0, 0, 0, 0, 0, 0],
					},
					{
						id: 43,
						sentence: "43、下面这两个词，哪个词语更符合你的心意？请仔细思考词语含义，无视字形和读音",
						answerA: "有条不紊",
						answerB: "不拘小节",
						yes: [0, 0, 0, 0, 0, 0, 1, 0],
						no: [0, 0, 0, 0, 0, 0, 0, 1],
					},
					{
						id: 44,
						sentence: "44、下面这两个词，哪个词语更符合你的心意？请仔细思考词语含义，无视字形和读音",
						answerA: "意念",
						answerB: "实况",
						yes: [0, 0, 0, 1, 0, 0, 0, 0],
						no: [0, 0, 1, 0, 0, 0, 0, 0],
					},
					{
						id: 45,
						sentence: "45、下面这两个词，哪个词语更符合你的心意？请仔细思考词语含义，无视字形和读音",
						answerA: "同情怜悯",
						answerB: "远见",
						yes: [0, 0, 0, 0, 0, 1, 0, 0],
						no: [0, 0, 0, 0, 1, 0, 0, 0],
					},
					{
						id: 46,
						sentence: "46、下面这两个词，哪个词语更符合你的心意？请仔细思考词语含义，无视字形和读音",
						answerA: "利益",
						answerB: "祝福",
						yes: [0, 0, 0, 0, 1, 0, 0, 0],
						no: [0, 0, 0, 0, 0, 1, 0, 0],
					},
					{
						id: 47,
						sentence: "47、下面这两个词，哪个词语更符合你的心意？请仔细思考词语含义，无视字形和读音",
						answerA: "务实的",
						answerB: "理论的",
						yes: [0, 0, 1, 0, 0, 0, 0, 0],
						no: [0, 0, 0, 1, 0, 0, 0, 0],
					},
					{
						id: 48,
						sentence: "48、下面这两个词，哪个词语更符合你的心意？请仔细思考词语含义，无视字形和读音",
						answerA: "朋友不多",
						answerB: "朋友众多",
						yes: [0, 1, 0, 0, 0, 0, 0, 0],
						no: [1, 0, 0, 0, 0, 0, 0, 0],
					},
					{
						id: 49,
						sentence: "49、下面这两个词，哪个词语更符合你的心意？请仔细思考词语含义，无视字形和读音",
						answerA: "有系统",
						answerB: "即兴",
						yes: [0, 0, 0, 0, 0, 0, 1, 0],
						no: [0, 0, 0, 0, 0, 0, 0, 1],
					},
					{
						id: 50,
						sentence: "50、下面这两个词，哪个词语更符合你的心意？请仔细思考词语含义，无视字形和读音",
						answerA: "富有想象的",
						answerB: "以事论事",
						yes: [0, 0, 0, 1, 0, 0, 0, 0],
						no: [0, 0, 1, 0, 0, 0, 0, 0],
					},
					{
						id: 51,
						sentence: "51、下面这两个词，哪个词语更符合你的心意？请仔细思考词语含义，无视字形和读音",
						answerA: "亲切的",
						answerB: "客观的 ",
						yes: [0, 0, 0, 0, 0, 1, 0, 0],
						no: [0, 0, 0, 0, 1, 0, 0, 0],
					},
					{
						id: 52,
						sentence: "52、下面这两个词，哪个词语更符合你的心意？请仔细思考词语含义，无视字形和读音",
						answerA: "客观的",
						answerB: "热情的",
						yes: [0, 0, 0, 0, 1, 0, 0, 0],
						no: [0, 0, 0, 0, 0, 1, 0, 0],
					},
					{
						id: 53,
						sentence: "53、下面这两个词，哪个词语更符合你的心意？请仔细思考词语含义，无视字形和读音",
						answerA: "建造",
						answerB: "发明",
						yes: [0, 0, 1, 0, 0, 0, 0, 0],
						no: [0, 0, 0, 1, 0, 0, 0, 0],
					},
					{
						id: 54,
						sentence: "54、下面这两个词，哪个词语更符合你的心意？请仔细思考词语含义，无视字形和读音",
						answerA: "文静  ",
						answerB: "爱合群",
						yes: [0, 1, 0, 0, 0, 0, 0, 0],
						no: [1, 0, 0, 0, 0, 0, 0, 0],
					},
					{
						id: 55,
						sentence: "55、下面这两个词，哪个词语更符合你的心意？请仔细思考词语含义，无视字形和读音",
						answerA: "理论  ",
						answerB: "事实 ",
						yes: [0, 0, 0, 1, 0, 0, 0, 0],
						no: [0, 0, 1, 0, 0, 0, 0, 0],
					},
					{
						id: 56,
						sentence: "56、下面这两个词，哪个词语更符合你的心意？请仔细思考词语含义，无视字形和读音",
						answerA: "富有同情心",
						answerB: "符合逻辑",
						yes: [0, 0, 0, 0, 0, 1, 0, 0],
						no: [0, 0, 0, 0, 1, 0, 0, 0],
					},
					{
						id: 57,
						sentence: "57、下面这两个词，哪个词语更符合你的心意？请仔细思考词语含义，无视字形和读音",
						answerA: "具有分析能力",
						answerB: "多愁善感 ",
						yes: [0, 0, 0, 0, 1, 0, 0, 0],
						no: [0, 0, 0, 0, 0, 1, 0, 0],
					},
					{
						id: 58,
						sentence: "58、下面这两个词，哪个词语更符合你的心意？请仔细思考词语含义，无视字形和读音",
						answerA: "合情合理",
						answerB: "令人着迷",
						yes: [0, 0, 1, 0, 0, 0, 0, 0],
						no: [0, 0, 0, 1, 0, 0, 0, 0],
					},
					{
						id: 59,
						sentence: "59、当你要在一个星期内完成一个大项目，你在开始之前......",
						answerA: "把要做的不同工作依次列出",
						answerB: "马上动工",
						yes: [0, 0, 0, 0, 0, 0, 1, 0],
						no: [0, 0, 0, 0, 0, 0, 0, 1],
					},
					{
						id: 60,
						sentence: "60、在社交场合中，你经常会感到......",
						answerA: "与某些人很难打开话匣儿和保持对话",
						answerB: "与多数人都能从容的长谈",
						yes: [0, 1, 0, 0, 0, 0, 0, 0],
						no: [1, 0, 0, 0, 0, 0, 0, 0],
					},
					{
						id: 61,
						sentence: "61、要做许多人也做的事，你也比较喜欢......",
						answerA: "按照一般认可的方法去做",
						answerB: "构想一个自己的想法",
						yes: [0, 0, 1, 0, 0, 0, 0, 0],
						no: [0, 0, 0, 1, 0, 0, 0, 0],
					},
					{
						id: 62,
						sentence: "62、你刚认识的朋友能否说出你的兴趣......",
						answerA: "马上可以",
						answerB: "要带他们真正了解你之后才可以",
						yes: [1, 0, 0, 0, 0, 0, 0, 0],
						no: [0, 1, 0, 0, 0, 0, 0, 0],
					},
					{
						id: 63,
						sentence: "63、你通常较喜欢的科目是......",
						answerA: "讲授概念和原则的",
						answerB: "讲授事实和数据的",
						yes: [0, 0, 0, 1, 0, 0, 0, 0],
						no: [0, 0, 1, 0, 0, 0, 0, 0],
					},
					{
						id: 64,
						sentence: "64、哪个是较高的赞誉，或许称为......",
						answerA: "一贯感性的人",
						answerB: "一贯理性的人",
						yes: [0, 0, 0, 0, 0, 1, 0, 0],
						no: [0, 0, 0, 0, 1, 0, 0, 0],
					},
					{
						id: 65,
						sentence: "65、你认为按照程序表做事",
						answerA: "有时是需要的，但一般来说你不大喜欢这样做",
						answerB: "大多数情况下是有帮助而且是你喜欢做的",
						yes: [0, 0, 0, 0, 0, 0, 0, 1],
						no: [0, 0, 0, 0, 0, 0, 1, 0],
					},
					{
						id: 66,
						sentence: "66、和一群人在一起，你通常会选",
						answerA: "跟你很熟悉的个别人讲话",
						answerB: "参与大伙的谈话",
						yes: [0, 1, 0, 0, 0, 0, 0, 0],
						no: [1, 0, 0, 0, 0, 0, 0, 0],
					},
					{
						id: 67,
						sentence: "67、在社交聚会上，你会......",
						answerA: "是说话很多的一个",
						answerB: "让别人多说话",
						yes: [1, 0, 0, 0, 0, 0, 0, 0],
						no: [0, 1, 0, 0, 0, 0, 0, 0],
					},
					{
						id: 68,
						sentence: "68、把周末期间要完成的事列成清单，这个主意会......",
						answerA: "合你意",
						answerB: "使你提不起劲",
						yes: [0, 0, 0, 0, 0, 0, 1, 0],
						no: [0, 0, 0, 0, 0, 0, 0, 1],
					},
					{
						id: 69,
						sentence: "69、你感觉哪个是较高的赞誉",
						answerA: "能干的",
						answerB: "富有同情心的",
						yes: [0, 0, 0, 0, 1, 0, 0, 0],
						no: [0, 0, 0, 0, 0, 1, 0, 0],
					},
					{
						id: 70,
						sentence: "70、你通常很喜欢......",
						answerA: "实现安排你的社交约会",
						answerB: "随兴之所至做事",
						yes: [0, 0, 0, 0, 0, 0, 1, 0],
						no: [0, 0, 0, 0, 0, 0, 0, 1],
					},
					{
						id: 71,
						sentence: "71、总的来说，要走一个大型作业时，你会选",
						answerA: "边做边想该做什么",
						answerB: "首先把工作按步细分",
						yes: [0, 0, 0, 0, 0, 0, 0, 1],
						no: [0, 0, 0, 0, 0, 0, 1, 0],
					},
					{
						id: 72,
						sentence: "72、你能否滔滔不绝的与人聊天",
						answerA: "只限于跟你有共同兴趣的人",
						answerB: "几乎跟任何人都可以",
						yes: [0, 1, 0, 0, 0, 0, 0, 0],
						no: [1, 0, 0, 0, 0, 0, 0, 0],
					},
					{
						id: 73,
						sentence: "73、你会......",
						answerA: "跟随一些证明有效的方法",
						answerB: "分析还有什么毛病，及针对尚未解决的问题",
						yes: [0, 0, 1, 0, 0, 0, 0, 0],
						no: [0, 0, 0, 1, 0, 0, 0, 0],
					},
					{
						id: 74,
						sentence: "74、为乐趣而阅读时，你会......",
						answerA: "喜欢奇特或创新的表达方式",
						answerB: "喜欢作者直话直说",
						yes: [0, 0, 0, 1, 0, 0, 0, 0],
						no: [0, 0, 1, 0, 0, 0, 0, 0],
					},
					{
						id: 75,
						sentence: "75、你宁愿替哪一类上司（老师）工作",
						answerA: "天性淳良，但常常前后不一的",
						answerB: "言辞尖锐但永远合乎逻辑的",
						yes: [0, 0, 0, 0, 0, 1, 0, 0],
						no: [0, 0, 0, 0, 1, 0, 0, 0],
					},
					{
						id: 76,
						sentence: "76、你做事多数是......",
						answerA: "按当天心情去做",
						answerB: "照拟好的程序表去做",
						yes: [0, 0, 0, 0, 0, 0, 0, 1],
						no: [0, 0, 0, 0, 0, 0, 1, 0],
					},
					{
						id: 77,
						sentence: "77、你是否......",
						answerA: "可以和任何人按需求从容的交谈",
						answerB: "只是对某些人或者某种情况下才可以畅所欲言",
						yes: [1, 0, 0, 0, 0, 0, 0, 0],
						no: [0, 1, 0, 0, 0, 0, 0, 0],
					},
					{
						id: 78,
						sentence: "78、要做决定时，你认为比较重要的是......",
						answerA: "据事实衡量",
						answerB: "考虑他人的感受和意见",
						yes: [0, 0, 0, 0, 1, 0, 0, 0],
						no: [0, 0, 0, 0, 0, 1, 0, 0],
					},
					{
						id: 79,
						sentence: "79、下面这两个词，哪个词语更符合你的心意？请仔细思考词语含义，无视字形和读音",
						answerA: "想象的",
						answerB: "真实的",
						yes: [0, 0, 0, 1, 0, 0, 0, 0],
						no: [0, 0, 1, 0, 0, 0, 0, 0],
					},
					{
						id: 80,
						sentence: "80、下面这两个词，哪个词语更符合你的心意？请仔细思考词语含义，无视字形和读音",
						answerA: "仁慈慷慨的",
						answerB: "意志坚定的",
						yes: [0, 0, 0, 0, 0, 1, 0, 0],
						no: [0, 0, 0, 0, 1, 0, 0, 0],
					},
					{
						id: 81,
						sentence: "81、下面这两个词，哪个词语更符合你的心意？请仔细思考词语含义，无视字形和读音",
						answerA: "公正 ",
						answerB: "有关怀心",
						yes: [0, 0, 0, 0, 1, 0, 0, 0],
						no: [0, 0, 0, 0, 0, 1, 0, 0],
					},
					{
						id: 82,
						sentence: "82、下面这两个词，哪个词语更符合你的心意？请仔细思考词语含义，无视字形和读音",
						answerA: "制作",
						answerB: "设计",
						yes: [0, 0, 1, 0, 0, 0, 0, 0],
						no: [0, 0, 0, 1, 0, 0, 0, 0],
					},
					{
						id: 83,
						sentence: "83、下面这两个词，哪个词语更符合你的心意？请仔细思考词语含义，无视字形和读音",
						answerA: "可能性",
						answerB: "必然性",
						yes: [0, 0, 0, 1, 0, 0, 0, 0],
						no: [0, 0, 1, 0, 0, 0, 0, 0],
					},
					{
						id: 84,
						sentence: "84、下面这两个词，哪个词语更符合你的心意？请仔细思考词语含义，无视字形和读音",
						answerA: "温柔 ",
						answerB: "力量",
						yes: [0, 0, 0, 0, 0, 1, 0, 0],
						no: [0, 0, 0, 0, 1, 0, 0, 0],
					},
					{
						id: 85,
						sentence: "85、下面这两个词，哪个词语更符合你的心意？请仔细思考词语含义，无视字形和读音",
						answerA: "实际",
						answerB: "多愁善感",
						yes: [0, 0, 0, 0, 1, 0, 0, 0],
						no: [0, 0, 0, 0, 0, 1, 0, 0],
					},
					{
						id: 86,
						sentence: "86、下面这两个词，哪个词语更符合你的心意？请仔细思考词语含义，无视字形和读音",
						answerA: "制造",
						answerB: "创造",
						yes: [0, 0, 1, 0, 0, 0, 0, 0],
						no: [0, 0, 0, 1, 0, 0, 0, 0],
					},
					{
						id: 87,
						sentence: "87、下面这两个词，哪个词语更符合你的心意？请仔细思考词语含义，无视字形和读音",
						answerA: "新颖的",
						answerB: "已知的",
						yes: [0, 0, 0, 1, 0, 0, 0, 0],
						no: [0, 0, 1, 0, 0, 0, 0, 0],
					},
					{
						id: 88,
						sentence: "88、下面这两个词，哪个词语更符合你的心意？请仔细思考词语含义，无视字形和读音",
						answerA: "同情",
						answerB: "分析",
						yes: [0, 0, 0, 0, 0, 1, 0, 0],
						no: [0, 0, 0, 0, 1, 0, 0, 0],
					},
					{
						id: 89,
						sentence: "89、下面这两个词，哪个词语更符合你的心意？请仔细思考词语含义，无视字形和读音",
						answerA: "坚持己见",
						answerB: "温柔有爱心",
						yes: [0, 0, 0, 0, 1, 0, 0, 0],
						no: [0, 0, 0, 0, 0, 1, 0, 0],
					},
					{
						id: 90,
						sentence: "90、下面这两个词，哪个词语更符合你的心意？请仔细思考词语含义，无视字形和读音",
						answerA: "具体的",
						answerB: "抽象的",
						yes: [0, 0, 1, 0, 0, 0, 0, 0],
						no: [0, 0, 0, 1, 0, 0, 0, 0],
					},
					{
						id: 91,
						sentence: "91、下面这两个词，哪个词语更符合你的心意？请仔细思考词语含义，无视字形和读音",
						answerA: "全心投入",
						answerB: "有决心的",
						yes: [0, 0, 0, 0, 0, 1, 0, 0],
						no: [0, 0, 0, 0, 1, 0, 0, 0],
					},
					{
						id: 92,
						sentence: "92、下面这两个词，哪个词语更符合你的心意？请仔细思考词语含义，无视字形和读音",
						answerA: "能干",
						answerB: "仁慈",
						yes: [0, 0, 0, 0, 1, 0, 0, 0],
						no: [0, 0, 0, 0, 0, 1, 0, 0],
					},
					{
						id: 93,
						sentence: "93、下面这两个词，哪个词语更符合你的心意？请仔细思考词语含义，无视字形和读音",
						answerA: "实际 ",
						answerB: "创新",
						yes: [0, 0, 1, 0, 0, 0, 0, 0],
						no: [0, 0, 0, 1, 0, 0, 0, 0],
					},
				],
				count: 0,
				answerText: [{
						type: "ISTJ",
						title: "调查员",
						explain: ["1.严肃、安静、藉由集中心志与全力投入、及可被信赖获致成功。", "2. 行事务实、 有序、 实际、 逻辑、 真实及可信赖。", "3. 十分留意且乐于任何事(工作、 居家、 生活均有良好组织及有序)。", "4. 负责任。", "5. 照设定成效来作出决策且不畏阻挠与闲言会坚定为之。", "6. 重视传统与忠诚。", "7. 传统性的思考者或经理。"],
					},
					{
						type: "ISFJ",
						title: "保护者",
						explain: ["1.安静、和善、负责任且有良心。", "2.行事尽责投入。", "3.安定性高，常居项目工作或团体之安定力量。", "4.愿投入、吃苦及力求精确。", "5.兴趣通常不在于科技方面。对细节事务有耐心。", "6.忠诚、考虑周到、知性且会关切他人感受。", "7.致力于创构有序及和谐的工作与家庭环境。"],
					},
					{
						type: "INFJ",
						title: "咨询师",
						explain: ["1.因为坚忍、创意及必须达成的意图而能成功。", "2.会在工作中投注最大的努力。", "3.默默强力的、诚挚的及用心的关切他人。", "4.因坚守原则而受敬重。", "5.提出造福大众利益的明确远景而为人所尊敬与追随。", "6.追求创见、关系及物质财物的意义及关联。", "7.想了解什么能激励别人及对他人具洞察力。", "8.光明正大且坚信其价值观。", "9.有组织且果断地履行其愿景。"],
					},
					{
						type: "INTJ",
						title: "建筑师",
						explain: ["1.具强大动力与本意来达成目的与创意—固执顽固者。", "2.有宏大的愿景且能快速在众多外界事件中找出有意义的模范。", "3.对所承负职务，具良好能力于策划工作并完成。", "4.具怀疑心、挑剔性、独立性、果决，对专业水准及绩效要求高。"],
					},
					{
						type: "ISTP",
						title: "鉴赏家",
						explain: ["1.冷静旁观者—安静、预留余地、弹性及会以无偏见的好奇心与未预期原始的幽默观察与分析。", "2.有兴趣于探索原因及效果，技术事件是为何及如何运作且使用逻辑的原理组构事实、重视效能。", "3.擅长于掌握问题核心及找出解决方式。", "4.分析成事的缘由且能实时由大量资料中找出实际问题的核心。"],
					},
					{
						type: "ISFP",
						title: "艺术家",
						explain: ["1.羞怯的、安宁和善地、敏感的、亲切的、且行事谦虚。", "2.喜于避开争论，不对他人强加已见或价值观。", "3.无意于领导却常是忠诚的追随者。", "4.办事不急躁，安于现状无意于以过度的急切或努力破坏现况，且非成果导向。", "5.喜欢有自有的空间及照自订的时程办事。"],
					},
					{
						type: "INFP",
						title: "调停者",
						explain: ["1.安静观察者，具理想性与对其价值观及重要之人具忠诚心。", "2.希望在生活形态与内在价值观相吻合。", "3.具好奇心且很快能看出机会所在。常担负开发创意的触媒者。", "4.除非价值观受侵犯，行事会具弹性、适应力高且承受力强。", "5.具想了解及发展他人潜能的企图。想作太多且作事全神贯注。", "6.对所处境遇及拥有不太在意。", "7.具适应力、有弹性除非价值观受到威胁。"],
					},
					{
						type: "INTP",
						title: "逻辑学家",
						explain: ["1.安静、自持、弹性及具适应力。", "2.特别喜爱追求理论与科学事理。", "3.习于以逻辑及分析来解决问题—问题解决者。", "4.最有兴趣于创意事务及特定工作，对聚会与闲聊无大兴趣。", "5.追求可发挥个人强烈兴趣的生涯。", "6.追求发展对有兴趣事务之逻辑解释。"],
					},
					{
						type: "ESTP",
						title: "企业家",
						explain: ["1.擅长现场实时解决问题—解决问题者。", "2.喜欢办事并乐于其中及过程。", "3.倾向于喜好技术事务及运动，交结同好友人。", "4.具适应性、容忍度、务实性;投注心力于会很快具成效工作。", "5.不喜欢冗长概念的解释及理论。", "6.最专精于可操作、处理、分解或组合的真实事务。"],
					},
					{
						type: "ESFP",
						title: "表演者",
						explain: ["1.外向、和善、接受性、乐于分享喜乐予他人。", "2.喜欢与他人一起行动且促成事件发生，在学习时亦然。", "3.知晓事件未来的发展并会热列参与。", "4.最擅长于人际相处能力及具备完备常识，很有弹性能立即适应他人与环境。", "5.对生命、人、物质享受的热爱者。"],
					},
					{
						type: "ENFP",
						title: "优胜者",
						explain: ["1.充满热忱、活力充沛、聪明的、富想象力的，视生命充满机会但期能得自他人肯定与支持。", "2.几乎能达成所有有兴趣的事。", "3.对难题很快就有对策并能对有困难的人施予援手。", "4.依赖能改善的能力而无须预作规划准备。", "5.为达目的常能找出强制自己为之的理由。", "6.即兴执行者。"],
					},
					{
						type: "ENTP",
						title: "辩论家",
						explain: ["1.反应快、聪明、长于多样事务。", "2.具激励伙伴、敏捷及直言讳专长。", "3.会为了有趣对问题的两面加予争辩。", "4.对解决新及挑战性的问题富有策略，但会轻忽或厌烦经常的任务与细节。", "5.兴趣多元，易倾向于转移至新生的兴趣。", "6.对所想要的会有技巧地找出逻辑的理由。", "7.长于看清楚他人，有智能去解决新或有挑战的问题。"],
					},
					{
						type: "ESTJ",
						title: "监督者",
						explain: ["1.务实、真实、事实倾向，具企业或技术天份。", "2.不喜欢抽象理论;最喜欢学习可立即运用事理。", "3.喜好组织与管理活动且专注以最有效率方式行事以达致成效。", "4.具决断力、关注细节且很快作出决策—优秀行政者。", "5.会忽略他人感受。", "6.喜作领导者或企业主管。", "7.做事风格比较偏向于权威指挥性。"],
					},
					{
						type: "ESFJ",
						title: "执政官",
						explain: ["1.诚挚、爱说话、合作性高、受欢迎、光明正大的—天生的合作者及活跃的组织成员。", "2.重和谐且长于创造和谐。", "3.常作对他人有益事务。", "4.给予鼓励及称许会有更佳工作成效。", "5.最有兴趣于会直接及有形影响人们生活的事务。", "6.喜欢与他人共事去精确且准时地完成工作。"],
					},
					{
						type: "ENFJ",
						title: "主人公",
						explain: ["1.热忱、易感应及负责任的、具有能鼓励他人的领导风格。", "2.对别人所想或希求会表达真正关切且切实用心去处理。", "3.能怡然且技巧性地带领团体讨论或演示文稿提案。", "4.爱交际、受欢迎及富同情心。", "5.对称许及批评很在意。", "6.喜欢带引别人且能使别人或团体发挥潜能。"],
					},
					{
						type: "ENTJ",
						title: "指挥官",
						explain: ["1.坦诚、具决策力的活动领导者。", "2.长于发展与实施广泛的系统以解决组织的问题。", "3.专精于具内涵与智能的谈话如对公众演讲。", "4.乐于经常吸收新知且能广开信息管道。", "5.易生过度自信，会强于表达自已创见。", "6.喜于长程策划及目标设定。"],
					},
				],
			};
		},
		mounted() {
			myChart = echarts.init(document.getElementById('echartContainer'))
			// 绘制图表
			myChart.setOption(option);
		},
		methods: {
			set() {
				this.value = [0, 0, 0, 0, 0, 0, 0, 0]
				option.series[0].data[0].value = this.value 
				myChart.setOption(option);
				for(var i = 1; i <= 93; i++) {
					this.count = 0;
					var radios = document.getElementsByName(i);
					var answer = [0, 0, 0, 0, 0, 0, 0, 0];
					for(var f = 0; f < radios.length; f++) {
						if(radios[f].checked) {
							answer = radios[f].value.split(",");
							this.count++;
							break;
						}
					}
					if(this.count == 0) {
						alert("问题" + i + "，没有作答！")
						return;
					} else {
						for(var a = 0; a < answer.length; a++) {
							this.value[a] = parseInt(this.value[a]) + parseInt(answer[a]);
						}
					}
				}
				option.series[0].data[0].value = this.value
				myChart.setOption(option);
				this.textChoice(this.value);
				this.show = false;
			},
			textChoice(o) {
				//				数组代表顺序[E,I,S,N,T,F,J,P]
				if(o[0] > o[1]) {
					var first = "E"
				} else {
					var first = "I"
				}
				if(o[2] > o[3]) {
					var second = "S"
				} else {
					var second = "N"
				}
				if(o[4] > o[5]) {
					var third = "T"
				} else {
					var third = "F"
				}
				if(o[6] > o[7]) {
					var forth = "J"
				} else {
					var forth = "P"
				}
				var type = first + second + third + forth
				this.setExplain(type)
				// 绘制图表
				myChart.setOption(option);
			},
			setExplain(t) {
				var answerText = this.answerText;
				for(var i = 0; i < answerText.length; i++) {
					if(answerText[i].type == t) {
						this.titleType = answerText[i].type
						this.titleName = answerText[i].title
						this.titleExplain = answerText[i].explain
					}
				}
			},
			hideImg() {
				this.show = true;
			},
		}
	}
</script>

<style scoped="scoped">
	#echartContainer>canvas {
		position: absolute;
		top: 3rem;
	}
	
	#question {
		padding-left: 3%;
		padding-right: 3%;
		width: 100%;
		height: auto;
		z-index: 100;
		position: absolute;
		top: 0px;
		left: 0px;
		background-color: #F9F9F9;
	}
	
	#img {
		width: 100%;
		height: auto;
		z-index: 99;
		position: absolute;
		top: 0px;
		left: 0px;
		background-color: #F9F9F9;
	}
	
	.question {
		font-size: 5.0vw;
		text-align: start;
		text-indent: -30px;
		margin-left: 2rem;
	}
	
	.answerBox {
		text-align: start;
		margin-left: 2rem;
	}
	
	.answerBox label {
		font-size: 4.1vw;
		margin-left: 5px;
	}
	
	.answer {
		height: 15px;
		width: 15px;
		position: relative;
		top: 3px;
	}
</style>